<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发布项目</title>

    <!-- Css (necessary Css) -->
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap.min.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap-theme.css')}"
          media="all">
    <link rel="stylesheet"
          th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/language-selector-remove-able-css.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/flexslider.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/style.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/plugin.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/menu.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/responsive.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/color.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/iconmoon.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/themetypo.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/widget.css')}" media="all">
    <link rel="icon" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/images/favicon.ico')}"
          type="image/x-icon"/>
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/layui/css/layui.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/css/eleTree.css')}" media="all">
    <!-- jQuery (necessary JavaScript) -->
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/bootstrap.min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/modernizr.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/menu.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.flexslider-min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/functions.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/layui/layui.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/ep/js/common/common.js')}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
    <style>
        .edit-top-bnts {
            float: right;
        }

        .my_icon {
            margin-right: 4px;
            line-height: 56px;
            padding-left: 6px;
            width: 10px;
            color: #DEE0E1;
            font-size: 20px;
        }

        .done span i {
            color: #FE6500;
        }

        .done span {
            font-weight: bold
        }

        .success span i {
            color: #00CBA6;
        }

        .nav_item {
            font-size: 18px;
            cursor: pointer;
        }

        .layui-input-block {
            margin-left: 10px;
            margin-right: 10px;
        }

        .layui-input-block input {
            color: #0C0C0C;
        }

        .ep-form-label {
            float: left;
            font-size: 20px;
            font-weight: bolder;
            display: block;
            line-height: 20px;
            text-align: right;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-small_label {
            float: left;
            width: 200px;
            font-size: 16px;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-item-require:after {
            display: inline-block;
            margin-left: 10px;
            content: "*";
            line-height: 1;
            font-size: 20px;
            color: #f5222d
        }

        .prompt-txt {
            font-size: 14px;
            line-height: 1.5;
            margin-top: 13px;
            color: #7a8087;
        }

        .layui-input-block {
            margin-left: 10px;
            margin-right: 10px;
        }

        .layui-input-block input {
            color: #0C0C0C;
        }

        .ep-form-label {
            float: left;
            font-size: 20px;
            font-weight: bolder;
            display: block;
            line-height: 20px;
            text-align: right;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-small_label {
            float: left;
            width: 200px;
            font-size: 16px;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-item-require:after {
            display: inline-block;
            margin-left: 10px;
            content: "*";
            line-height: 1;
            font-size: 20px;
            color: #f5222d
        }

        .prompt-txt {
            font-size: 14px;
            line-height: 1.5;
            margin-top: 13px;
            color: #7a8087;
        }
    </style>
</head>
<div>
    <!-- Header -->
    <div th:replace="../templates/ep/front/crowd/header :: main-header"></div>
    <!-- Header -->
    <!-- body-->
    <div class="layui-container" style="border-top: #DEE0E1  solid 1px;">
        <div class="layui-row" style="margin-top: 50px">
            <div class="layui-col-md4">
                <h3 style="font-size: 30px;">编辑项目资料</h3>
            </div>
            <div class="layui-col-md4 layui-col-md-offset4">
                <div id="btns" class="edit-top-bnts">
                    <div id="preview" class="layui-btn hidden"
                         style="background-color: #FE6500;width: 90px; height: 40px">
                        <span>预览</span>
                    </div>
                    <div id="confirm" class="layui-btn hidden"
                         style="background-color: #FE6500;width: 90px;height: 40px">
                        <span>提交审核</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row" style="margin-top: 50px;border: #DEE0E1  solid 1px">
            <div id="project_base" class="layui-col-md2 nav_item layui-col-md-offset1 done">
                <span><i class="layui-icon my_icon">&#x1005;</i></span>
                <span>基础信息</span>
                <span><i class="layui-icon my_icon">&#xe602;</i></span>
            </div>
            <div id="project_material" class="layui-col-md2 nav_item">
                <span><i class="layui-icon my_icon">&#x1005;</i></span>
                <span>项目素材</span>
                <span><i class="layui-icon my_icon">&#xe602;</i></span>
            </div>
            <div id="project_detail" class="layui-col-md2 nav_item">
                <span><i class="layui-icon my_icon">&#x1005;</i></span>
                <span>详情编辑</span>
                <span><i class="layui-icon my_icon">&#xe602;</i></span>
            </div>
            <div id="project_reward" class="layui-col-md2 nav_item">
                <span><i class="layui-icon my_icon">&#x1005;</i></span>
                <span>回报设置</span>
                <span><i class="layui-icon my_icon">&#xe602;</i></span>
            </div>
            <div id="project_team" class="layui-col-md2 nav_item">
                <span><i class="layui-icon my_icon">&#x1005;</i></span>
                <span>团队成员</span>
                <!--            <span><i class="layui-icon my_icon done">&#xe602;</i></span>-->
            </div>
        </div>
    </div>

    <div class="layui-container" id="project_base_view">
        <form class="layui-form" action="" style="margin-top: 50px">
            <div class="layui-form-item">
                <label class="ep-form-label ep-form-item-require">项目标题</label>
                <div class="layui-input-block">
                    <input type="text" class="hidden" name="projectId" data-th-value="${project.projectId}">
                    <input type="text" name="title" id="title" required lay-verify="required"
                           placeholder="请输入项目标题,最多26个字" data-th-value="${project.title}"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="prompt-txt layui-input-block">标题中需带有产品名称及类别，可添加宣传语作为副标题。<a
                        id="project_title_example">参考案例</a></label>
            </div>
            <div class="layui-form-item">
                <label class="ep-form-label ep-form-item-require">项目短标题</label>
                <div class="layui-input-block">
                    <input type="text" name="shortTitle" id="shortTitle" required lay-verify="required"
                           placeholder="请输入项目短标题,最多10个字" data-th-value="${project.shortTitle}"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="prompt-txt layui-input-block">用于首页推荐、榜单等。<a
                        id="project_shortTitle_example">参考案例</a></label>
            </div>
            <div class="layui-form-item">
                <label class="ep-form-label ep-form-item-require">项目简介</label>
                <div class="layui-input-block">
                    <textarea style="resize: none;font-size: 16px;font-weight: 400;color: #0C0C0C" name="introduce"
                              id="introduce"
                              data-th-value="${project.introduce}"
                              placeholder="请填写项目简介，最多120个字" class="layui-textarea"></textarea></div>
                <label class="prompt-txt layui-input-block">简介需清晰准确地阐述项目核心内容，会随项目被分享到社交平台。<a
                        id="project_introduce_example">参考案例</a></label>
            </div>
            <label class="ep-form-label ep-form-item-require">项目类别</label>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <select id="type" name="type" lay-verify="required">
                        <option value=""></option>
                    </select>
                </div>
                <label class="prompt-txt layui-input-block"></label>
            </div>
            <label class="ep-form-label ep-form-item-require">众筹时长</label>
            <div class="layui-form-item">
                <label class="ep-form-small_label" style="width: 200px">申请开始众筹时间:</label>
                <div class="layui-input-block">
                    <input type="text" id="project_time_from" name="fundBegin" required readonly
                           lay-verify="required" placeholder="申请开始众筹时间，请选择" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="ep-form-small_label">结束时间:</label>
                <div class="layui-input-block">
                    <input type="text" id="project_time_to" name="fundEnd" required lay-verify="required" readonly
                           placeholder="项目结束时间，请选择" autocomplete="off" class="layui-input">
                </div>
            </div>
            <label class="prompt-txt layui-input-block">众筹时间不超过60天，建议众筹周期30-45天。由于审核需要花费时间，开始时间从3天以后开始</label>
            <div class="layui-form-item">
                <label class="ep-form-label ep-form-item-require">目标金额</label>
                <div class="layui-input-block">
                    <input type="goal" name="goal" id="goal" required lay-verify="required"
                           placeholder="2元起，通过审核后不允许修改，请谨慎填写" data-th-value="${project.goal}"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="prompt-txt layui-input-block">制定金额目标，众筹结束后，如达到或超出将由平台结算给你，如未达到将全额退款给支持者。</label>
            </div>
            <div class="layui-form-item" style="float: right">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo"
                            style="background-color: #FE6500; height: 40px">保存,进入下一步
                    </button>
                    <!--                <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                </div>
            </div>
        </form>

    </div>
</div>
<!-- body end -->
<!--// CopyRight //-->
<div th:replace="../templates/ep/front/crowd/footer :: footer"></div>
<!--// CopyRight //-->
</body>


<script th:inline="javascript">
    //Demo
    layui.config({
        base: '/ep/',
        debug: true
    }).extend({
        xmSelect: 'lay/extends/xm-select',
        apexcharts: 'lay/extends/apexcharts.min',
        eleTree: 'lay/extends/eleTree'
    });
    layui.use(['form', 'layer', 'xmSelect', 'laydate', 'util'], function () {
        var form = layui.form
            , layer = layui.layer
            , xmSelect = layui.xmSelect
            , laydate = layui.laydate
            , util = layui.util
            , $view = $('#project_base_view')
            , typeSelect
            , fundBegin,
            fundEnd;
        initFrom();
        var project = [[${project}]];

        function initFrom() {
            initSelect();
            var introduce = [[${project.introduce}]];
            $view.find("#introduce").val(introduce);
            var fundBegin = [[${project.fundBegin}]];
            fundBegin = util.toDateString(fundEnd, 'yyyy-MM-dd');
            $view.find("#project_time_from").val(fundBegin);
            var fundEnd = [[${project.fundEnd}]];
            fundEnd = util.toDateString(fundEnd, 'yyyy-MM-dd');
            $view.find("#project_time_to").val(fundEnd);

            form.render();
        }

        //监听提交
        form.on('submit(formDemo)', function (data) {
            let index = layer.load('', {time: 5 * 1000});
            // layer.msg(JSON.stringify(data.field));
            var param = data.field;
            var introduce = param.introduce
                , title = param.title
                , shortTitle = param.shortTitle
                , goal = param.goal;

            if (introduce === '' || introduce.length == 0) {
                $("#introduce").focus()
                layer.msg('必填项不能为空', {icon: 5});
                return false;
            }
            if (introduce.length > 120) {
                $("#introduce").focus()
                layer.msg('简介不能超过120个字', {icon: 5});
                return false;
            }
            if (title.length > 26) {
                $("#title").focus()
                layer.msg('标题不能超过26个字', {icon: 5});
                return false;
            }
            if (shortTitle.length > 10) {
                $("#shortTitle").focus()
                layer.msg('短标题不能超过10个字', {icon: 5});
                return false;
            }
            if (!(/(^[1-9]\d*$)/.test(goal))) {
                $("#goal").focus()
                layer.msg('目标金额需要为正整数', {icon: 5});
                return false;
            } else if (goal < 2) {
                $("#goal").focus()
                layer.msg('目标金额需要大于等于2', {icon: 5});
                return false;
            }
            $.ajax({
                url: "/web/updateProjectBase",
                type: "post",
                data: param,
                success: function (data) {
                    if (data.code == 200) {
                        window.location.href = "/web/project_material?id=" + data.data;
                        layer.close(index);

                    }
                }
            })
            return false;
        });

        // 参考案例弹出
        $("#project_title_example").click(function () {
            layer.alert('<p>▷ 国潮古建雷峰塔，全木质榫卯结构</p>' + '<p>▷ 潮玩｜Amber熊抱抱不止于大，可玩可收藏更治困</p>' + '<p>▷ 轻策卡牌棋子对抗类桌游《三千营》</p>'
                , {title: "案例示范", area: $(window).width() <= 750 ? '95%' : '50%'})
        });
        $('#project_shortTitle_example').click(function () {
            layer.alert('<p>▷ 国潮|古建雷峰塔</p>' + '<p>▷ Amber的熊抱抱</p>' + '<p>▷ 金戈铁马，驰骋疆场</p>'
                , {title: "案例示范", area: $(window).width() <= 750 ? '95%' : '50%'})
        })
        $('#project_introduce_example').click(function () {
            layer.alert('<p>▷ 推出榫卯结构木质模型，目的是让大家能够更直观的感受建筑美学。此次专门选了雷锋塔来做模型。因为榫卯结构第一次被发现是在河姆渡遗址，有六七千年的历史。河姆渡遗址在江南，雷峰塔也是在江南。选雷峰塔比较贴切，也符合我们的初衷，传播我们中华文化之美。</p>'
                + '<p>▷ 熊抱抱出击！大大的身体拥有无限的能量，当重重困难来袭，熊抱抱就会化身超级英熊，打败所有的困难和丧气，陪伴你，治愈你，给你最温暖安心的拥抱！ 如果你有感到困顿迷茫的时候，就让Amber给你一个熊抱吧！</p>'
                + '<p>▷ 《三千营》是一款模拟骑兵对决的卡牌棋子对抗游戏，双方玩家将扮演骑兵小队指挥官，为自己的骑兵小队组合合理的装备卡牌，在骑兵对冲中占据优势。</p>'
                , {title: "案例示范", area: $(window).width() <= 750 ? '95%' : '50%'})
        })

        // 众筹时间
        var startTime = laydate.render({
            elem: '#project_time_from',
            type: 'date',
            btns: ['clear', 'confirm'],
            name: fundBegin,
            trigger: 'click',
            // value: new Date(getBgDate()),
            min: 3,// 默认最小值为3天后
            max: 30,//默认最大值为30天以后
            done: function (value, date) {
                endTime.config.dateTime = "";
                $("#project_time_to").val("")
                endTime.config.min = {
                    date: date.date + 1,
                    hours: date.hours,
                    minutes: date.minutes,
                    month: date.month - 1,
                    seconds: date.seconds,
                    year: date.year,
                }
                endTime.config.max = {
                    date: date.date + 1,
                    hours: date.hours,
                    minutes: date.minutes,
                    month: date.month + 1,
                    seconds: date.seconds,
                    year: date.year,
                }

            }
        });
        var endTime = laydate.render({
            elem: '#project_time_to',
            type: 'date',
            btns: ['clear', 'confirm'],
            trigger: 'click',
            name: fundEnd
        });

        // 初始化下拉框
        function initSelect() {
            $.ajax({
                url: "/web/getProjectType",
                type: "get",
                success: function (data) {
                    var data = data.data;
                    var str = "";
                    for (var i = 0; i < data.length; i++) {
                        str += "<option value='" + data[i].code + "'>" + data[i].name + "</option>"
                    }
                    $view.find("#type").append(str);
                    var type = [[${project.type}]];
                    $view.find('#type').val(type);
                    form.render();

                }
            })

        }

        //预览

        $("#preview").click(function () {
            window.location.href = "/web/project_preView?projectId=" + project.projectId;
        })

        // 标题的点击
        $("#project_material").click(function () {
            if (project != null) {
                window.location.href = "/web/project_material?id=" + project.projectId;
            } else {
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon: 5});
            }
        })
        $("#project_base").click(function () {
            if (project != null) {
                window.location.href = "/web/project_base?id=" + project.projectId;
            }
        })
        $("#project_detail").click(function () {
            console.log("???")
            if (project != null) {
                window.location.href = "/web/project_detail?id=" + project.projectId;
            } else {
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon: 5});
            }
        })
        $("#project_reward").click(function () {
            if (project != null) {
                window.location.href = "/web/project_reward?id=" + project.projectId;
            } else {
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon: 5});
            }
        })
        $("#project_team").click(function () {
            if (project != null) {
                window.location.href = "/web/project_team?id=" + project.projectId;
            } else {
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon: 5});
            }
        })


    });
</script>
</html>